<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Todo List</title>
	<link rel="stylesheet" href="assets/css/base.css">
	<link rel="stylesheet" href="assets/css/index.css">
</head>

<body>
	<section class="todoapp">
		<header class="header">
			<h1>todos</h1>
			<input class="new-todo" placeholder="What needs to be done?" autofocus>
		</header>
		<!-- This section should be hidden by default and shown when there are todos -->
		<section class="main">
			<input class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list"></ul>
		</section>
		<!-- This footer should hidden by default and shown when there are todos -->
		<footer class="footer">
			<!-- This should be `0 items left` by default -->
			<span class="todo-count"><strong>0</strong> Actived</span>
			<!-- Remove this if you don't implement routing -->
			<ul class="filters">
				<li>
					<a class="footerBtn selected" href="javascript:;" id="showAllListBtn">All</a>
				</li>
				<li>
					<a class="footerBtn" href="javascript:;" id="showActiveListBtn">Active</a>
				</li>
				<li>
					<a class="footerBtn" href="javascript:;" id="showCompletedListBtn">Completed</a>
				</li>
			</ul>
			<!-- Hidden if no completed items are left ↓ -->
			<button class="clear-completed">Clear completed</button>
		</footer>
	</section>


	<div class="p1">
		<div class="p2">
		</div>
		<div class="p3">
			<div class="p4">
				<button id=hehe>hehe btn</button>
			</div>
		</div>
	</div>


	<script src="/js/jquery.min.js"></script>
	<script src="/js/template-web.js"></script>

	<script type="text/html" id="taskList">
		{{ each taskArr v }}
		<!-- These are here just to show the structure of the list items -->
		<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
		<!-- 如果是已完成，就加 completed 类名，如果是编辑状态，就加 editing 类名 -->
		<li data-id="{{ v._id }}" class="taskItem {{ v.completed ? 'completed' : '' }}">
			<div class="view">
				<!-- 如果已完成，那么就添加checked属性 -->
				<input class="toggle" type="checkbox" {{ v.completed ? 'checked': '' }} >
				<label >{{ v.title }}</label>
				<button class="destroy" ></button>
			</div>
			<input class="edit" value="Create a TodoMVC template" >
		</li>
		{{ /each }}
	</script>

	<script>

		$(() => {

			const $todoListContainer = $('.todo-list')

			const $activedCount = $('.todo-count > strong')

			// 全部的任务列表
			let taskArr = []
			// 在来回切换列表的时候，不能把全部任务列表数据丢失掉，所以新建一个数组来存储需要展示的任务列表
			let curTaskArr = []

			const renderTaskList = () => {
				$todoListContainer.html(template('taskList', { taskArr: curTaskArr }))
				// 找出所有未完成的任务列表，然后将其长度设置到展示个数的元素中
				// 为什么可以直接在这个 renderTaskList 函数中处理呢？因为每当任务列表发生变化的时候我们都会调用这个函数
				$activedCount.html(taskArr.filter(v => !v.completed).length)
			}

			$.ajax({
				type: 'GET',
				url: '/todo/task',
				success(res) {
					taskArr = curTaskArr = res
					renderTaskList()
				}
			})

			const $newTodoInp = $('.new-todo')

			$newTodoInp.keyup(({ keyCode }) => {
				// 按了回车
				if (keyCode === 13) {
					const title = $newTodoInp.val().trim()
					// 如果没有输入任务名称，就直接终止
					if (title === '') return

					// 看看这个任务名称是否存在
					if (taskArr.some(v => v.title === title)) return alert('该任务名称已存在')

					$.ajax({
						type: 'POST',
						url: '/todo/addTask',
						contentType: 'application/json',
						data: JSON.stringify({ title }),
						success(res) {
							$newTodoInp.val('')
							taskArr.push(res)
							renderTaskList()
						}
					})

				}
			})

			// 由于这些列表是动态添加到页面中去的
			// 所以要用事件委托的形式监听容器（ul元素）的点击事件
			// 子元素通过事件冒泡的形式触发
			$todoListContainer.on('click', '.destroy', ({ target }) => {
				// 如果事件处理函数是普通的形式，就可以用this，这个this就是删除按钮				
				// 如果事件处理函数是箭头函数，那么这个this就不是删除按钮了
				// console.log(target.dataset.id); // 写原生JS的时候，就用它
				// console.log($(target).attr('data-id')); // attr，属性名要写全,  只能设置字符串类型
				// console.log($(target).data('id')); // （推荐） data，属性名中的data-前缀可以省略,  可以设置任意类型

				$.ajax({
					type: 'GET',
					url: '/todo/deleteTask',
					data: { _id: $(target).parents('.taskItem').data('id') },
					success({ _id }) {
						// 如果有_id，说明删除成功了
						if (_id) {
							// 过滤出所有id不是被删除任务id的任务，然后把过滤出来的新数组赋值给taskArr
							taskArr = taskArr.filter(v => v._id !== _id)
							// 重新渲染列表
							renderTaskList()
						}
					}
				})

			})

			$todoListContainer.on('change', '.toggle', ({ target }) => {
				// console.log(target.checked, $(target).data('id'));

				const { checked } = target
				const id = $(target).parents('.taskItem').data('id')
				$.ajax({
					type: 'POST',
					url: '/todo/modifyTask',
					contentType: 'application/json',
					data: JSON.stringify({
						_id: id,
						completed: checked
					}),
					success(res) {
						if (!res) return alert('修改失败')

						// 先在目前的数组中，找出要修改的这个任务对象，然后直接重新赋值completed属性
						taskArr.find(v => v._id === res._id).completed = res.completed
						renderTaskList()

						// 虽然刷新可以直接获取到最新的数据，但是对于性能和服务端压力来说会大一些，用户体验也会差点
						// 我们能在前台搞定的，就调用后台接口
						// location.reload()

					}
				})

			})


			$todoListContainer.on('dblclick', 'label', ({ target }) => {
				// 这个target就是lable元素
				// target的爸爸的爸爸就是li元素
				target.parentElement.parentElement.classList.add('editing')
				// target的爸爸的下一个兄弟就是input元素
				target.parentElement.nextElementSibling.value = target.innerHTML
				target.parentElement.nextElementSibling.focus()
			})

			$todoListContainer.on('blur', '.edit', ({ target }) => {
				const id = $(target).parents('.taskItem').data('id')
				const val = target.value.trim()

				// 把原来的任务标题拿到
				const oldTask = taskArr.find(v => v._id === id)

				// 如果是空字符串  或者  和原来的title一样，就没有比较再发请求了
				if (!val || val === oldTask.title) {
					target.parentElement.classList.remove('editing')
					return
				}

				// 如果任务名已存在，就直接告知用户
				if (taskArr.some(v => v.title === val)) return alert('该任务已存在')

				$.ajax({
					type: 'POST',
					url: '/todo/modifyTask',
					contentType: 'application/json',
					data: JSON.stringify({
						_id: id,
						title: target.value.trim()
					}),
					success(res) {
						console.log(res);
						if (!res) return alert('修改失败')

						// 更新现在数组中的该任务对象的标题
						oldTask.title = target.value.trim()
						// 重新渲染
						renderTaskList()
					}
				})

			})


			$('#showAllListBtn').click(({ target }) => {
				curTaskArr = taskArr
				$('.footerBtn').removeClass('selected')
				target.classList.add('selected')
				renderTaskList()
			})

			$('#showActiveListBtn').click(({ target }) => {
				curTaskArr = taskArr.filter(v => !v.completed)
				$('.footerBtn').removeClass('selected')
				target.classList.add('selected')
				renderTaskList()
			})

			$('#showCompletedListBtn').click(({ target }) => {
				curTaskArr = taskArr.filter(v => v.completed)
				$('.footerBtn').removeClass('selected')
				target.classList.add('selected')
				renderTaskList()
			})

		})

	</script>
</body>

</html>